<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桥牌比赛报名</title>
    <link rel="stylesheet" href="register.css">
</head>
<body>
    <header>
        <div class="header-content">
            <h1>西农桥牌协会长期桥牌比赛</h1>
            <p>每月精彩赛事，学年荣誉等你来拿！</p>
        </div>
    </header>

    <main>
        <div class="content-row">
            <div class="content-column">
                <form id="registration-form">
                    <h2>报名信息</h2>
                    <label for="college">学院：</label>
                    <input type="text" id="college" name="college" required><br><br>
                    <label for="major-class">专业班级：</label>
                    <input type="text" id="major-class" name="major-class" required><br><br>
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" required><br><br>
                    <label for="student-id">学号：</label>
                    <input type="text" id="student-id" name="student-id" required><br><br>
                    <label for="category">报名比赛类别：</label>
                    <select id="category" name="category" required>
                        <option value="category1">类别1</option>
                        <option value="category2">类别2</option>
                        <option value="category3">类别3</option>
                    </select><br><br>
                    <button type="submit">确认报名</button>
                </form>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 西农桥牌协会</p>
    </footer>

    <script>
        document.getElementById('registration-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const data = {};
            formData.forEach((value, key) => data[key] = value);
            // 这里可以将数据发送到服务器
            console.log(data);
            window.location.href = 'payment.html'; // 跳转到缴费页面
        });
    </script>
</body>
</html>